<template>
  <div class="content">
    <!-- 搜索栏 -->
    <div class="title" style="width: 100%;margin-top: 20px;">
      <el-form  :inline="true" :model="searchName" class="form" style="margin: 2px 20px 20px 20px;">
        <el-form-item label="风景名称">
          <el-input v-model="searchName.name" placeholder="请输入风景名称" />
        </el-form-item>
        <el-form-item label="地点名称">
          <el-input v-model="searchName.location" placeholder="请输入地点名称" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>

        <el-form-item style="float:right;margin: 0px 0px 0px 0px;">
          <el-button type="warning" plain @click="addProduct">添加风景项目</el-button>
        </el-form-item>
      </el-form>
    </div>


    <div class="tableBody">
      <el-table :data="sceneryList" style="margin: -14px 0px 0px 0px; width: 100%; height: 100%;"
        >

        <el-table-column fixed prop="imageUrl" label="风景图片" width="200">
          <template #default="scope">
            <img :src="scope.row.imageUrl" width="200" height="150">
          </template>
        </el-table-column>

        <el-table-column prop="name" label="风景项目" width="150" class="column-title" />
        <el-table-column prop="adultPrice" label="成人票￥" align="center" sortable class="column-title" width="80" />
        <el-table-column prop="childPrice" label="学生票￥" align="center" sortable class="column-title" width="80" />
        <el-table-column prop="location" label="地点 " show-overflow-tooltip width="250" class="column-title" />
        <el-table-column prop="description" label="项目简介" show-overflow-tooltip class="column-title" width="auto" />


        <el-table-column label="操作" header-align="center" width="150" class="column-title">
          <template #default="scope">
            <el-button type="primary" size="small" @click="updateProduct(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="delProductById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>


      </el-table>

    </div>

    <!-- 表格 -->
    <!-- 分页组件Pagination -->
    <el-pagination :current-page="pagination.currentPage" :page-size="pagination.pageSize"
      :page-sizes="[5, 10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange"
      style="height: 33px; margin-top: 2px;float: right;" />


    <!-- 新增 / 修改的 DiaLog对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="formTitle">
      <el-form :model="sceneryForm" :rules="rules" ref="formRef" >
        <!-- 第一行 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="风景项目名：" :label-width="labelWidth" prop="name">
              <el-input v-model="sceneryForm.name" placeholder="请输入项目名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="成人票￥：" :label-width="labelWidth" prop="adultPrice">
              <el-input name="adultPrice" v-model.number="sceneryForm.adultPrice" placeholder="请输入价格" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学生票￥：" :label-width="labelWidth" prop="childPrice">
              <el-input v-model.number="sceneryForm.childPrice" placeholder="请输入价格" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品备注：" :label-width="labelWidth" prop="remark">
              <el-input v-model="sceneryForm.remark" placeholder="请输入产品备注（可选）" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品描述：" :label-width="labelWidth" prop="description">
              <el-input v-model="sceneryForm.description" placeholder="请输入产品描述" />
            </el-form-item>
          </el-col>

        </el-row>

        <!-- 第三行 -->
        <el-row>

          <el-col :span="12">
            <el-form-item label="地点：" :label-width="labelWidth" prop="location">
              <el-input v-model="sceneryForm.location" placeholder="请输入风景所在地" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="关联的行程列表：" :label-width="labelWidth" prop="TravelItineraryAddDTO">
              <div v-for="(item, index) in sceneryForm.itineraries" :key="index">
                <el-col :span="18">
                  <el-form-item lable="行程天数" :prop="'itineraries.' + index + '.dayNumber'">
                    行程天数： <el-input v-model="item.dayNumber" placeholder="行程天数" />
                  </el-form-item>
                </el-col>
                <el-col :span="25">
                  <el-form-item lable="行程描述" :prop="'itineraries.' + index + '.itineraryText'">
                    <el-input v-model="item.itineraryText" type="textarea" :autosize="{ minRows: 4 }"  placeholder="请填写行程描述" />
                  </el-form-item>
                </el-col>
              </div>
              <el-form-item>
                <el-button type="primary" @click="addItineraries">
                  <el-icon>
                    <Plus />
                  </el-icon> 新增行程列表
                </el-button>
                <el-button type="danger" @click="delItineraries">—删除</el-button>
              </el-form-item>

            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="关联的景点列表：" :label-width="labelWidth" prop="TravelAttractionAddDTO">
              <div v-for="(item, index) in sceneryForm.attractions" :key="index">
                <el-col :span="24">
                  <el-col :span="24">
                    <el-form-item :prop="'attractions.' + index + '.attractionName'">
                      <el-input v-model="item.attractionName" placeholder="请填写景点名称" />
                    </el-form-item>
                  </el-col>
                  <el-form-item :prop="'attractions.' + index + '.attractionDesc'">
                    <el-input v-model="item.attractionDesc" type="textarea" :autosize="{ minRows: 4 }"  placeholder="景点描述" />
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item :prop="'attractions.' + index + '.attractionImage'">
                    <el-upload class="avatar-uploader" action="/travel/products/upload" :show-file-list="false"
                      :on-success="(response, uploadFile) => handleAvatarSuccess(response, uploadFile, index)"
                      :before-upload="beforeAvatarUpload" :headers="uploadHeaders">
                      <img v-if="item.attractionImage" :src="item.attractionImage" class="avatar" />
                      <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                      </el-icon>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <!-- <el-table-column label="查看地图">
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="showMap(scope.row.id)" width="80">查看地图</el-button>
                  </template>
                </el-table-column> -->
                <el-button type="primary" size="small" @click="showMap(item,index)" width="80">查看地图</el-button>
              </div>
              <el-form-item>
                <el-button type="primary" @click="addAttraction">
                  <el-icon>
                    <Plus />
                  </el-icon> 新增景点
                </el-button>
                <el-button type="danger" @click="delAttraction">—删除</el-button>
              </el-form-item>

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="行程中所需消费：" :label-width="labelWidth" prop="TravelPricingDetailAddDTO">
              <div v-for="(item, index) in sceneryForm.pricingDetails" :key="index">
                <el-col :span="18">
                  <el-form-item :prop="'pricingDetails.' + index + '.isIncluded'">
                    <el-checkbox v-model="item.isIncluded">是否包含</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="25">
                  <el-form-item :prop="'pricingDetails.' + index + '.itemName'">
                    <el-input v-model="item.itemName" placeholder="费用项目名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="25">
                  <el-form-item :prop="'pricingDetails.' + index + '.price'">
                    <el-input v-model="item.price" placeholder="费用金额" />
                  </el-form-item>
                </el-col>
              </div>
              <el-form-item>
                <el-button type="primary" @click="addPricingDetails">
                  <el-icon>
                    <Plus />
                  </el-icon> 新增消费项目
                </el-button>
                <el-button type="danger" @click="delPricingDetails">—删除</el-button>
              </el-form-item>

            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row>
          
        </el-row> -->



        <el-row>
          <el-col :span="12">
            <el-form-item label="风景主图：" :label-width="labelWidth">
              <el-upload class="avatar-uploader" action="/travel/products/upload" :show-file-list="false"
                :on-success="handleAvatarSuccessMain" :before-upload="beforeAvatarUpload" :headers="uploadHeaders">
                <img v-if="sceneryForm.imageUrl" :src="sceneryForm.imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="save()">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="地图浏览" v-model="mapDialogVisible" width="80%">
      <el-row :gutter="20">
        <el-col :span="18">
          <el-card>
            <MapContainer @click.stop="onClick" :init-map="initMap"  />
             <!-- <MapContainer @click.stop="onClick"   />  -->
          </el-card>
        </el-col>
        <el-col :span="6">

          <el-input v-model="selectedLocation.province">{{ selectedLocation.province || '请点击' }}</el-input>
          <el-input v-model="selectedLocation.city">{{ selectedLocation.city || '请点击' }}</el-input>
          <el-input v-model="selectedLocation.address">{{ selectedLocation.address || '请点击' }}</el-input>

          <el-input v-model="initMap[0]"></el-input>
          <el-input v-model="initMap[1]"></el-input>

          <el-button @click="saveLnglat">保存</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed } from "vue";
import { getProductList, addNewProductApi, queryProductByIdApi, updateProductApi, delProductByIdApi } from "../api/productApi"
import { Plus } from '@element-plus/icons-vue'; // 按需导入图标
import { ElMessage, ElMessageBox } from 'element-plus';
import MapContainer from '../component/MapContainer.vue'
import { useLoginEmpStore } from '../stores/loginEmp';
import { useMapDataStore } from '../stores/mapData';


const mapDataStore = useMapDataStore();
const selectedLocation = ref({
  province:null,
  city: null,
  address: null,
  lnglat: [0,0]
})

const lnglat = ref([])
const initMap = ref([])
function onClick() {
  console.log('点击了');
  setTimeout(() => {
    selectedLocation.value = mapDataStore.mapData;

    console.log(mapDataStore.mapData);
    lnglat.value = selectedLocation.value.lnglat;
    initMap.value = lnglat.value;
  },800)
}

// const saveLnglat =()=>{
//   console.log('lnglat');
//   console.log(lnglat.value);
  
//   TravelAttractionAddDTO.latitude  = lnglat.value[0];
//   TravelAttractionAddDTO.longitude = lnglat.value[1];
// }


const loginEmpStore = useLoginEmpStore();
// 从 store 中获取 token 并计算请求头
const uploadHeaders = computed(() => {
  const loginEmp = loginEmpStore.getLoginEmp();
  return loginEmp && loginEmp.token
    ? { 'authorization': loginEmp.token }
    : {};
});
const mapDialogVisible = ref(false);

// const showMap = (item) => {
//   console.log("经纬度：");
  
//   console.log(item.latitude,item.longitude);
  
//     initMap.value = [item.latitude,item.longitude]
//   mapDialogVisible.value = true;
 
// }

// 修改showMap方法，传递景点索引
const showMap = (item, index) => {
  selectedLocation.value={};
  initMap.value = [item.latitude, item.longitude];
  console.log("经纬度：");
  console.log(item);
  
  mapDialogVisible.value = true;
  // 存储当前编辑的景点索引
  currentEditingIndex.value = index;
};

const currentEditingIndex = ref(-1); // 存储当前编辑的景点索引

const saveLnglat = () => {
  const index = currentEditingIndex.value;
  if (index >= 0 && index < sceneryForm.attractions.length) {
    const attraction = sceneryForm.attractions[index];
    attraction.latitude = initMap.value[0];
    attraction.longitude = initMap.value[1];
    console.log('已更新景点经纬度:', attraction);
    ElMessage.success('保存成功');
  } else {
    console.error('未找到要更新的景点对象');
  }
};


const sceneryList = ref([])
const pagination = ref({
  currentPage: 1,
  pageSize: 20,
  total: 0
});

// 搜索条件（使用普通对象）
const searchName = ref({
  name: '',
  location: ''
});
// const queryParams = computed(() => ({
//   ...pagination,
//   ...searchName
// }));
const search = async () => {
  console.log("aaaaaa");
  const params = {
    currentPage: pagination.value.currentPage,
    pageSize: pagination.value.pageSize,
    name: searchName.value.name,
    location: searchName.value.location
  };

  console.log('发送的参数:', params);

  const result = await getProductList(
    // currentPage: pagination.value.currentPage,
    // pageSize: pagination.value.pageSize
    params
  )

  console.log("bbbbbbbbb");
  if (result.code) {
    console.log(result);
    sceneryList.value = result.data.records
    console.log("result" + result.data.records)
    // console.log( "sceneryList"+sceneryList);

    pagination.value.total = result.data.total //总记录数
  }
}
// const selectIds = ref([]) //封装勾选的id
// const handleSelectionChange = (val) => {
//   selectIds.value = val.map(e => e.id) //map方法-遍历数组并对其中的元素进行进一步的处理, 并将结果封装到一个新的数组中
// }

//每页展示记录数变化时触发
const handleSizeChange = (val) => { //val: 记录数 50
  pagination.value.pageSize = val
  search()
}

//页码变化时出发
const handleCurrentChange = (val) => { //val: 页码
  pagination.value.currentPage = val
  search()
}



const dialogFormVisible = ref(false);
const formTitle = ref('')
const labelWidth = '150px';

const TravelItineraryAddDTO = reactive({
  dayNumber: 0, // 行程天数，给个初始 1
  itineraryText: '' // 行程描述，初始空字符串
});
const TravelAttractionAddDTO = reactive({
  attractionDesc: '', // 景点描述
  attractionImage: '', // 景点图片URL
  attractionName: '', // 景点名称
  latitude: 0,
  longitude: 0
});
const TravelPricingDetailAddDTO = reactive({
  isIncluded: false, // 是否包含在总价中，初始 false
  itemName: '', // 费用项名称
  price: 0 // 费用金额
});

const sceneryForm = reactive({
  id: null,
  description: '', // 产品描述，必填，初始空字符串
  imageUrl: '', // 产品主图URL，必填，初始空字符串
  location: '', // 旅游地点，必填，初始空字符串
  name: '', // 产品名称，必填，初始空字符串
  adultPrice: 0,
  childPrice: 0, // 产品价格，必填，初始 0
  remark: '', // 产品备注，可选，初始空字符串
  itineraries: [TravelItineraryAddDTO], // 关联的行程列表，必填，初始化包含一个符合结构的对象
  attractions: [TravelAttractionAddDTO], // 关联的景点列表，必填，初始化包含一个符合结构的对象
  pricingDetails: [TravelPricingDetailAddDTO] // 关联的费用项列表，必填，初始化包含一个符合结构的对象
});


const addProduct = () => {
  console.log("addProduct");

  formTitle.value = '新增风景项目'

  //初始化 表单数据
  // 逐个属性重置，保持响应式
  sceneryForm.id = '';
  sceneryForm.description = '';
  sceneryForm.imageUrl = '';
  sceneryForm.location = '';
  sceneryForm.name = '';
  sceneryForm.adultPrice = 0;
  sceneryForm.childPrice = 0;
  sceneryForm.remark = '';
  sceneryForm.itineraries = [TravelItineraryAddDTO];
  sceneryForm.attractions = [TravelAttractionAddDTO];
  sceneryForm.pricingDetails = [TravelPricingDetailAddDTO];

  // 重新初始化子对象的属性，同样逐个设置
  TravelItineraryAddDTO.dayNumber = 1;
  TravelItineraryAddDTO.itineraryText = '';
  TravelAttractionAddDTO.attractionDesc = '';
  TravelAttractionAddDTO.attractionImage = '';
  TravelAttractionAddDTO.attractionName = '';
  TravelAttractionAddDTO.latitude = 116.397428;
  TravelAttractionAddDTO.longitude = 39.90923;
  TravelPricingDetailAddDTO.isIncluded = false;
  TravelPricingDetailAddDTO.itemName = '';
  TravelPricingDetailAddDTO.price = 0;
  // initMap.value=[116.397428, 39.90923];

    dialogFormVisible.value = true
}



// 初始化景点对象（可提取为复用函数）
const createDefaultAttraction = () => {
  return {
    attractionDesc: '',
    attractionImage: '',
    attractionName: ''
  };
};

// 新增景点项
const addAttraction = () => {
  // 创建新的景点对象
  const newAttraction = createDefaultAttraction();
  // 添加到数组中
  sceneryForm.attractions.push(newAttraction);
};

const delAttraction = () => {
  sceneryForm.attractions.pop();
}

// 新增消费项
const createPricingDetails = () => {
  return {
    isIncluded: false, // 是否包含在总价中，初始 false
    itemName: '', // 费用项名称
    price: 0 // 费用金额
  };
};
const addPricingDetails = () => {
  // 创建新的景点对象
  const newAttraction = createPricingDetails();
  // 添加到数组中
  sceneryForm.pricingDetails.push(newAttraction);
};

const delPricingDetails = () => {
  sceneryForm.pricingDetails.pop();
}

// 新增行程即所需天数
const createItineraries = () => {
  return {
    dayNumber: 0, // 行程天数，给个初始 1
    itineraryText: '' // 行程描述，初始空字符串
  };
};
const addItineraries = () => {
  // 创建新的景点对象
  const newAttraction = createItineraries();
  // 添加到数组中
  sceneryForm.itineraries.push(newAttraction);
};
const delItineraries = () => {
  sceneryForm.itineraries.pop();
}

const updateProduct = async (id) => {
  console.log("修改风景项目");
  dialogFormVisible.value = true;
  formTitle.value = '修改风景项目';

  try {
    // 发送请求，根据ID查询信息
    const result = await queryProductByIdApi(id);

    if (result.code === 200) {
      Object.assign(sceneryForm, result.data);

      // 处理数组类型字段（如itineraries/attractions/pricingDetails）
      if (result.data.itineraries) {
        sceneryForm.itineraries = result.data.itineraries.map(item =>
          reactive({ ...item })
        );
      }

      if (result.data.attractions) {
        sceneryForm.attractions = result.data.attractions.map(item =>
          reactive({ ...item })
        );
      }

      if (result.data.pricingDetails) {
        sceneryForm.pricingDetails = result.data.pricingDetails.map(item =>
          reactive({ ...item })
        );
      }
    }
  } catch (error) {
    console.error("获取风景项目信息失败:", error);
    ElMessage.error("获取数据失败，请稍后重试");
  }
};

const delProductById = async (id) => {
  ElMessageBox.confirm('您确定要删除该数据吗?', '删除',
    { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
  ).then(async () => { //点击确定按钮
    //发送请求, 删除数据
    const result = await delProductByIdApi(id)
    if (result.code) {
      ElMessage.success('删除成功')
      search()
    } else {
      ElMessage.error(result.msg)
    }
  })
}

//文件上传
//文件上传成功后触发

const handleAvatarSuccess = (response, uploadFile, index) => {
  // 通过索引找到对应的景点元素，设置其attractionImage属性
  sceneryForm.attractions[index].attractionImage = response.data;
};
const handleAvatarSuccessMain = (response, uploadFile, index) => {
  // 通过索引找到对应的景点元素，设置其attractionImage属性
  sceneryForm.imageUrl = response.data;
};

//文件上传前触发
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('文件格式不正确')
    return false //不执行上传操作
  }
  return true
}
// const save = async () => {
//   console.log("sceneryForm:");
//   console.log(sceneryForm);
  
//   let result;
//   if (!sceneryForm.id) {
//     result = await addNewProductApi(sceneryForm)
//     console.log("sceneryForm");
//     console.log(sceneryForm);
    
//   } else {
//     result = await updateProductApi(sceneryForm)
//   }

//   if (result.code) {
//     ElMessage.success('操作成功')
//     dialogFormVisible.value = false
//     search()
//   } else {//保存失败, 提示错误信息
//     ElMessage.error(result.msg)
//   }
// }

// 添加表单ref

const save = async () => {
  // 先进行表单验证
  formRef.value.validate(async (valid) => {
    if (valid) {
      console.log("sceneryForm:");
      console.log(sceneryForm);
      
      let result;
      if (!sceneryForm.id) {
        result = await addNewProductApi(sceneryForm)
        console.log("sceneryForm");
        console.log(sceneryForm);
        
      } else {
        result = await updateProductApi(sceneryForm)
      }

      if (result.code) {
        ElMessage.success('操作成功')
        dialogFormVisible.value = false
        search()
      } else {
        ElMessage.error(result.msg)
      }
    } else {
      console.log('表单验证失败');
      ElMessage.error('请检查表单输入是否正确');
      return false;
    }
  });
}

const formRef = ref(null);


// // 行程列表自定义验证
// const validateItineraries = (rule, value, callback) => {
//   if (!value || value.length === 0) {
//     callback(new Error('至少添加一个行程'));
//   } else {
//     // 验证每个行程项
//     const errors = value.some(item => {
//       return !item.dayNumber || item.dayNumber <= 0 || !item.itineraryText;
//     });
//     if (errors) {
//       callback(new Error('行程天数和描述不能为空'));
//     } else {
//       callback();
//     }
//   }
// }

// // 景点列表自定义验证
// const validateAttractions = (rule, value, callback) => {
//   if (!value || value.length === 0) {
//     callback(new Error('至少添加一个景点'));
//   } else {
//     const errors = value.some(item => {
//       return !item.attractionName || !item.attractionDesc || !item.attractionImage;
//     });
//     if (errors) {
//       callback(new Error('景点名称、描述和图片不能为空'));
//     } else {
//       callback();
//     }
//   }
// }

// // 费用项列表自定义验证
// const validatePricingDetails = (rule, value, callback) => {
//   if (!value || value.length === 0) {
//     callback(new Error('至少添加一个费用项'));
//   } else {
//     const errors = value.some(item => {
//       return !item.itemName || (item.price !== 0 && !item.price);
//     });
//     if (errors) {
//       callback(new Error('费用项目名称和金额不能为空'));
//     } else {
//       callback();
//     }
//   }
// }
const validateRange = (rule, value, callback) => {
  if (value === '' || value === null || value === undefined) {
    callback(new Error('此字段不能为空'));
  } else if (isNaN(Number(value))) {
    callback(new Error('请输入有效的数字'));
  } else if (Number(value) < 0) {
    callback(new Error('数值不能小于0'));
  } else if (Number(value) > 100000) {
    callback(new Error('数值不能大于100000'));
  } else {
    callback();
  }
};


// 在script标签内添加验证规则
const rules = {
  name: [
    { required: true, message: '请输入风景项目名', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  adultPrice: [
    { required: true, message: '请输入成人票价格', trigger: 'blur' },
    { type: 'number', message: '请输入数字', trigger: 'blur' },
    // { min: 0,max:10000000, message: '价格不能为负数', trigger: 'blur' }
     {validator: validateRange , trigger: 'blur' }
  ],
  childPrice: [
    { required: true, message: '请输入学生票价格', trigger: 'blur' },
    { type: 'number', message: '请输入数字', trigger: 'blur' },
    // { min: 0,max:10000000, message: '价格不能为负数', trigger: 'blur' }
    {validator: validateRange , trigger: 'blur' }
  ],
  location: [
    { required: true, message: '请输入风景所在地', trigger: 'blur' },
    { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入产品描述', trigger: 'blur' },
    { min: 10, message: '描述至少10个字符', trigger: 'blur' }
  ],
  // 验证行程列表
  // TravelItineraryAddDTO: [
  //   {required: true, message: '至少添加一个行程', trigger: 'change' },
  //   // { validator: validateItineraries, trigger: 'change' }
  // ],
  // // 验证景点列表
  // TravelAttractionAddDTO: [
  //   {required: true, message: '至少添加一个景点', trigger: 'change' },
  //   // { validator: validateAttractions, trigger: 'change' }
  // ],
  // // 验证费用项列表
  // TravelPricingDetailAddDTO: [
  //   {  required: true, message: '至少添加一个费用项', trigger: 'change' },
  //   // { validator: validatePricingDetails, trigger: 'change' }
  // ]
}


onMounted(() => {
  search()
})




</script>

<style scoped>
.avatar-uploader .avatar {
  width: 78px;
  height: 78px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  text-align: center;
  border: 1px dashed;
}

.tableBody {
  width: 98%;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>